<template>
  <div v-loading="loading" class="basic-info">
    <div class="basic-info__header">
      <el-button
        v-for="(item, index) in tabs"
        :key="index"
        :title="item.label"
        :type="item.value === activeTab ? 'selected' : null"
        @click="tabsClick(item)">
        {{ item.label }}
      </el-button>
    </div>
    <div v-for="(item, index) in tabs" :key="index">
      <wk-head-section
        v-if="item.value === activeTab"
        class="basic-info__body"
        :label="item.label"
        :props="{
            headBgColor: '#FAFBFC',
            arrows: 'left',
            border: false,
            bodyPadding: '16px 0 0'
          }">
        <table v-if="activeTab === 'base'" class="base-table">
          <tbody>
            <tr v-for="(bItem, bIndex) in baseList" :key="bIndex">
              <td>{{ bItem.label }}</td>
              <td class="w-292">{{ getBaseInfoValue(bItem.field) }}</td>
              <td>{{ bItem.label1 }}</td>
              <td class="w-292">
                {{ bItem.field1 ? getBaseInfoValue(bItem.field1) : '' }}
              </td>
            </tr>
            <tr>
              <td>
                {{ $t('components.Premium.0b29d34d10b427f8d5dcb37f280ff1f0') }}
              </td>
              <td colspan="3">{{ getBaseInfoValue('address') }}</td>
            </tr>
            <tr>
              <td>
                {{ $t('components.Premium.c42b9073c1c45c32ab6b6384f669738d') }}
              </td>
              <td colspan="3">{{ getBaseInfoValue('scope') }}</td>
            </tr>
          </tbody>
        </table>
        <el-table
          v-else
          :data="relativeObj[activeTab]"
          height="400"
          stripe
          highlight-current-row
          style="width: 100%;">
          <el-table-column
            :label="$t('components.Premium.d8ded47c9a00fa3bcd042e3b3b0798a2')"
            width="50"
            align="center"
            header-align="center"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            v-for="(rItem, rIndex) in relativeFieldObj[activeTab]"
            :key="rIndex"
            :prop="rItem.field"
            :label="rItem.label"
            :width="rItem.width"
            show-overflow-tooltip />
        </el-table>
      </wk-head-section>
    </div>
  </div>
</template>

<script>
import {
  crmEnterpriseEmployeesAPI, // 查询主要人员信息
  crmEnterprisePartnersAPI, // 查询股东信息
  crmEnterpriseBranchsAPI, // 查询分支机构信息
  crmEnterpriseInvestmentAPI, // 查询对外投资信息
  crmEnterpriseChangeRecordsAPI // 查询企业信息变更记录
} from '@/api/premium/businessInfo'

import WkHeadSection from '@/components/NewCom/WkHeadSection'

export default {
  // 基本信息
  name: 'BasicInfo',

  components: {
    WkHeadSection
  },

  props: {
    name: String,
    // 基本详情
    data: Object
  },

  data() {
    return {
      loading: false,
      activeTab: 'base',
      tabs: [{
        label: this.$t('components.Premium.e24a1b8d6013e99509568a71d8e73ae8'),
        value: 'base'
      }, {
        label: this.$t('components.Premium.23c65643a32bd1f503088f3adf7eee60'),
        value: 'employees'
      }, {
        label: this.$t('components.Premium.5743c4f67010b9af72a9488c746633ab'),
        value: 'partners'
      }, {
        label: this.$t('components.Premium.6918bc1bc6265ad3be8ae3f5864f2b7f'),
        value: 'branchs'
      }, {
        label: this.$t('components.Premium.085b84cac439fbc5625cb52031844463'),
        value: 'investment'
      }, {
        label: this.$t('components.Premium.b0ed3611badf496ded9103ac9bc4d803'),
        value: 'changeRecords'
      }],
      baseList: [],
      // 其他表格形式详情
      relativeObj: {
        employees: [],
        partners: [],
        branchs: [],
        investment: [],
        changeRecords: []
      },
      relativeFieldObj: {}
    };
  },

  computed: {},

  watch: {},

  created() {
    this.baseList = this.getBaseInfo()
    this.relativeFieldObj = this.getDetailFields()
  },

  mounted() {},

  beforeDestroy() {},

  methods: {
    /**
     * @description: tabs 切换
     * @param {*} item tab 对象
     * @return {*}
     */
    tabsClick(item) {
      this.activeTab = item.value
      this.getDetail()
    },

    /**
     * @description: 基础信息展示字段
     * @param {*}
     * @return {*}
     */
    getBaseInfo() {
      const list = [{
        field: 'operName',
        label: this.$t('components.Premium.c0782ec402727ae4ff07eb20a892eb6f')
      }, {
        field: 'newStatus',
        label: this.$t('components.Premium.bc7dbfa73639c6a6141d2f40ccf17135')
      }, {
        field: 'registCapi',
        label: this.$t('components.Premium.c3d4f5edc1c0d2c8f253e3901fbdc76c')
      }, {
        field: 'actualCapi',
        label: this.$t('components.Premium.5a77f64d1d6539a1231103bfecb74b92')
      }, {
        field: 'creditNo',
        label: this.$t('components.Premium.5a6eb624b81ecf39368791566627c532')
      }, {
        field: 'regNo',
        label: this.$t('components.Premium.63a91db97fd2779d1de471575d46d69a')
      }, {
        field: 'orgNo',
        label: this.$t('components.Premium.1435edf2ddbec4ab06de5ac7b7c4d087')
      }, {
        field: 'startDate',
        label: this.$t('components.Premium.fe6527a3fa2a9b0685d0f49dde30b246')
      }, {
        field: 'econKind',
        label: this.$t('components.Premium.57b0a4589b4d84d1262621bcb5997ad8')
      }, {
        field: 'term',
        label: this.$t('components.Premium.2c03c879058d784ced86df4e6f926064') // termStart termEnd
      }, {
        field: 'belongOrg',
        label: this.$t('components.Premium.bfd852abe23dfa68d40c76e097801a6e')
      }, {
        field: 'checkDate',
        label: this.$t('components.Premium.900c800a50be11a867dbbaeac15c4591')
      }]

      const trNum = Math.ceil(list.length / 2)
      const data = []
      for (let index = 0; index < trNum; index++) {
        const firstIndex = index * 2
        const nextIndex = firstIndex + 1
        const firstObj = list[firstIndex]
        const nextObj = list[nextIndex]
        data.push({
          ...firstObj,
          field1: nextObj ? nextObj.field : '',
          label1: nextObj ? nextObj.label : ''
        })
      }
      console.log(data)
      return data
    },

    /**
     * @description: 基础信息展示值
     * @param {*}
     * @return {*}
     */
    getBaseInfoValue(field) {
      const placeholder = '--'
      if (field === 'term') {
        const list = []
        const termStart = this.data.termStart ? this.data.termStart.split(' ')[0] : ''
        if (termStart) {
          list.push(termStart)
        }
        const termEnd = this.data.termEnd ? this.data.termEnd.split(' ')[0] : ''
        if (termEnd) {
          list.push(termEnd)
        }
        return list.join('-') || placeholder
      } else if (field === 'startDate' || field === 'checkDate') {
        return this.data[field] ? this.data[field].split(' ')[0] : placeholder
      }

      return this.data[field] || placeholder
    },

    /**
     * @description: 获取表格详情
     * @param {*}
     * @return {*}
     */
    getDetail() {
      const request = {
        employees: crmEnterpriseEmployeesAPI,
        partners: crmEnterprisePartnersAPI,
        branchs: crmEnterpriseBranchsAPI,
        investment: crmEnterpriseInvestmentAPI,
        changeRecords: crmEnterpriseChangeRecordsAPI
      }[this.activeTab]
      if (request) {
        const activeTab = this.activeTab
        this.loading = true
        request(this.name).then(res => {
          this.relativeObj[activeTab] = res.data || []
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      }
    },

    /**
     * @description: 获取表格详情头部
     * @param {*}
     * @return {*}
     */
    getDetailFields() {
      const employees = [{
        label: this.$t('components.Premium.e66c037b34c0aefce020730ffd1498cb'),
        field: 'name'
      }, {
        label: this.$t('components.Premium.b38ff22610788b23fe395e3fe37adcf7'),
        field: 'title'
      }]
      const partners = [{
        label: this.$t('components.Premium.364f9f1d45bea84bcb293f09a21269b1'),
        field: 'name'
      }, {
        label: this.$t('components.Premium.b377b4e9c1d2471063d268358297b6d1'),
        field: 'percent'
      }, {
        label: this.$t('components.Premium.c8d113f016f859d2413a05b045bedea5'),
        field: 'shType'
      }, {
        label: this.$t('components.Premium.61b3654fb912e0c331a5ed9d5b217d30'),
        field: 'amount'
      }]
      const branchs = [{
        label: this.$t('components.Premium.55a7e232c8532572bd9b247fa3a1529c'),
        field: 'name'
      }, {
        label: this.$t('components.Premium.879fc9f038991822555a954a13a876dd'),
        field: 'operName',
        width: '120px'
      }, {
        label: this.$t('components.Premium.89518b0860bc1e3fd259114c3a0fa3bb'),
        field: 'startDate',
        width: '120px'
      }, {
        label: this.$t('components.Premium.4fede276bd8578ed262a205cb63366ef'),
        field: 'status',
        width: '240px'
      }]
      const investment = [{
        label: this.$t('components.Premium.0dd9fce26e02b934b503ac57d2608997'),
        field: 'shortName'
      }, {
        label: this.$t('components.Premium.7c641b2fac3dbfb61843ebab6bb0e17f'),
        field: 'shType'
      }, {
        label: this.$t('components.Premium.4602d07e0694b10368f45ef0a03f38cf'),
        field: 'percent',
        width: '120px'
      }, {
        label: this.$t('components.Premium.73e226b65ebd535ccf635d74819ac127'),
        field: 'amount',
        width: '120px'
      }]
      const changeRecords = [{
        label: this.$t('components.Premium.1607909f171e85de7fa4b25c34188de0'),
        field: 'changeDate',
        width: '120px'
      }, {
        label: this.$t('components.Premium.a1d5093a5b0b1a945c7a717812ebb0fe'),
        field: 'changeItem',
        width: '220px'
      }, {
        label: this.$t('components.Premium.ac3892cdce3d96d5906b74d781d97789'),
        field: 'beforeContent'
      }, {
        label: this.$t('components.Premium.cfa1148a2b443ca665bc1df3f026ad0c'),
        field: 'afterContent'
      }]

      return {
        employees,
        partners,
        branchs,
        investment,
        changeRecords
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.basic-info {
  position: relative;

  &__body {
    margin-top: 16px;
  }
}

.base-table {
  border-spacing: 0;
  border-collapse: collapse;
  border: $--border-base;

  tr {
    td:nth-child(odd) {
      width: 130px;
      background: $--background-color-base;
    }

    .w-292 {
      width: 292px;
    }
  }

  td {
    padding: 8px;
    font-weight: $--font-weight-primary;
    line-height: 1.57;
    word-break: break-all;
    vertical-align: middle;
    border: $--border-base;
  }
}
</style>
